<template>
	<!-- 分享弹框 -->
	<popupCompVue
		v-model:show="showShare"
		@closeCallback="closeShare"
		:title="title"
		:bgColor="bgColor"
		fontColor="#fff"
		:height="height"
	>
		<view class="funcList" :style="{ color: fontColor }">
			<view v-if="isWxShare" class="fun" @click="shareWx">
				<button open-type="share" class="shareBtn">微信好友</button>
				<image src="http://112.124.50.179:8888/imgs/chaoshan/wx.png" mode=""></image>
				<view>微信好友</view>
			</view>
			<view v-if="isFriendCircle" class="fun" @click="shareFriendCircle">
				<image
					src="http://112.124.50.179:8888/imgs/chaoshan/friendCircle.png"
					mode=""
				></image>
				<view>朋友圈</view>
			</view>
		</view>
		<view class="funcList" :style="{ color: fontColor }">
			<view class="fun" v-if="isReport" @click="report">
				<image src="http://112.124.50.179:8888/imgs/chaoshan/report.png" mode=""></image>
				<view>举报</view>
			</view>
			<view class="fun" @click="del" v-if="isDel">
				<image src="http://112.124.50.179:8888/imgs/home/poster_del.png" mode=""></image>
				<view>删除</view>
			</view>
			<view class="fun" @click="copyInviteCode" v-if="isInvitedCode">
				<image src="http://112.124.50.179:8888/imgs/home/yqm.png" mode=""></image>
				<view>复制邀请码</view>
			</view>
		</view>
	</popupCompVue>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, watch } from 'vue';
import popupCompVue from './index.vue';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();
const props = defineProps({
	bgColor: {
		default: '#0E0E0E'
	},
	fontColor: {
		default: '#fff'
	},
	delId: {},
	reportedId: {},
	reportType: {},
	show: {
		type: Boolean,
		required: true,
		default: false
	},
	title: {
		type: String,
		default: '更多'
	},
	isWxShare: {
		type: Boolean,
		default: true
	},
	isFriendCircle: {
		type: Boolean,
		default: true
	},
	isReport: {
		type: Boolean,
		default: false
	},
	isDel: {
		type: Boolean,
		default: false
	},
	height: {
		type: String,
		default: ''
	},
	invitedCode: {
		type: String,
		default: ''
	},

	isInvitedCode: {
		type: Boolean,
		default: false
	}
});
const emit = defineEmits(['update:show']);
const showShare = ref(props.show);

watch(
	() => props.show,
	(newValue, oldValue) => {
		showShare.value = newValue;
	},
	{
		immediate: true
	}
);

const closeShare = () => {
	showShare.value = false;
	emit('update:show', false);
};
const del = () => {
	homeApi
		.deleteDynamicApi({
			dynamicId: props.delId
		})
		.then((res) => {
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				});
			});
		})
		.catch(() => {});
};
/**
 * 举报
 */
const report = () => {
	uni.navigateTo({
		url:
			`/subPages/chaoshan/report?reportType=${props.reportType}&&reportedId=` +
			props.reportedId,
		success: () => {
			emit('update:show', false);
		}
	});
};

/**
 * 分享到微信
 */
const shareWx = () => {
	// #ifdef H5
	uni.showToast({
		title: '当前是网页，无法分享到微信',
		icon: 'error'
	});
	// #endif

	// #ifdef APP
	uni.share({
		provider: 'weixin',
		scene: 'WXSceneSession',
		type: 0,
		href: 'http://uniapp.dcloud.io/',
		title: 'uni-app分享',
		summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
		imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
		success: function (res) {
			console.log('success:' + JSON.stringify(res));
		},
		fail: function (err) {
			console.log('fail:' + JSON.stringify(err));
		}
	});
	// #endif

	// emit('update:show', false);
};

/**
 * 分享到朋友圈
 */
const shareFriendCircle = () => {
	// #ifdef H5
	uni.showToast({
		title: '当前是网页，无法分享到朋友圈',
		icon: 'error'
	});
	// #endif
	uni.share({
		provider: 'weixin',
		scene: 'WXSceneTimeline',
		type: 0,
		href: 'http://uniapp.dcloud.io/',
		title: 'uni-app分享',
		summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
		imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
		success: function (res) {
			console.log('success:' + JSON.stringify(res));
		},
		fail: function (err) {
			console.log('fail:' + JSON.stringify(err));
		}
	});

	// emit('update:show', false);
};

const copyInviteCode = () => {
	uni.setClipboardData({
		data: props.invitedCode,
		success: function () {
			uni.showToast({
				title: '复制成功'
			});
		},
		fail: function (err) {
			console.log('复制失败', err);
		}
	});

	emit('update:show', false);
};
</script>

<style lang="scss">
.funcList {
	display: flex;
	width: 100%;
	padding: 0 48rpx;
	box-sizing: border-box;
	font-size: 26rpx;
	color: #ffffff;
	line-height: 30rpx;
	padding-bottom: 45rpx;

	.fun {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 52rpx;
		position: relative;

		.shareBtn {
			position: absolute;
			width: 100%;
			height: 100%;
			background: none;
			opacity: 0;
		}
	}

	image {
		width: 96rpx;
		height: 96rpx;
		margin-bottom: 16rpx;
	}
}
</style>
